<template>
  <view class="image">
    <u--image
      v-if="width || height"
      :width="width"
      :height="height"
      class="img"
      :lazy-load="isLazy"
      :fade="isFade"
      :duraction="duration"
      :mode="mode"
      :src="imageUrl">
      <template v-slot:loading>
        <u-loading-icon color="#cccccc" textSize="12"></u-loading-icon>
      </template>
    </u--image>
    <u--image
        v-else
        class="img"
        :lazy-load="isLazy"
        :fade="isFade"
        :duraction="duration"
        :mode="mode"
        :src="imageUrl">
      <template v-slot:loading>
        <u-loading-icon color="#cccccc" textSize="12"></u-loading-icon>
      </template>
    </u--image>
  </view>
</template>

<script>
/*
* 这是图片组件封装
* 2025-07-24
* todo
* 因为H5中u-view不支持图片懒加载
* 所以,有需要, 需要自己实现
*
* // 在视窗中展示
* new IntersectionObserver
*
* // 还可以空闲加载
*/
import config from '../../config/config'
export default {
  // https://uviewui.com/components/image.html
  props: {
    url: {
      type: String,
      default: ''
    },
    isRemote: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    isLazy: {
      type: Boolean,
      default: true
    },
    isFade: {
      type: Boolean,
      default: true
    },
    // 要搭配fade一起使用
    duration: {
      type: Number,
      default: 100
    },
    // https://uniapp.dcloud.net.cn/component/image.html#%E5%9B%BE%E7%89%87%E6%A0%BC%E5%BC%8F%E8%AF%B4%E6%98%8E
    mode: {
      type: String,
      default: 'widthFix'
    }
  },
  computed: {
    imageUrl() {
      if (!this.url) {
        return ''
      }
      return this.isRemote ? config.baseUrl + this.url : this.url
    }
  },
  data() {
    return {
    }
  },
  methods: {

  },
  created() {

  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.image {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  .img {
    //display: block;
    //margin: auto;
    //width: auto;
    //height: auto;
    //max-width: 100%;
    //max-height: 100%;
    border-radius: 10rpx;
  }
}
</style>
